<template>
  <div>
    <el-form :model="form" label-width="120px">
      <!-- 设备连接限制 -->
      <el-form-item label="设备连接限制">
        <el-input v-model="form.connectionLimit" />
      </el-form-item>

      <!-- 心跳间隔(秒) -->
      <el-form-item label="心跳间隔(秒)">
        <el-input v-model="form.heartbeatInterval" />
      </el-form-item>

      <!-- 传输加密 -->
      <el-form-item label="传输加密">
        <el-select v-model="form.encryption" placeholder="请选择加密方式">
          <el-option label="TTS" value="TTS" />
          <el-option label="SSL" value="SSL" />
          <el-option label="HTTPS" value="HTTPS" />
          <el-option label="RTS" value="RTS" />
        </el-select>
      </el-form-item>

      <!-- 告警阈值 -->
      <el-form-item label="告警阈值">
        <el-select
          v-model="form.alarmThresholdType"
          placeholder="请选择阈值类型"
        >
          <el-option label="温度" value="温度" />
          <el-option label="湿度" value="湿度" />
          <el-option label="电量" value="电量" />
        </el-select>
        <el-input
          v-model="form.alarmThresholdValue"
          placeholder="请输入阈值"
          style="margin-top: 10px"
        />
      </el-form-item>

      <!-- 系统日志级别 -->
      <el-form-item label="系统日志级别">
        <el-select v-model="form.logLevel" placeholder="请选择日志级别">
          <el-option label="一般" value="一般" />
          <el-option label="错误" value="错误" />
          <el-option label="警告" value="警告" />
          <el-option label="调试" value="调试" />
        </el-select>
      </el-form-item>

      <!-- 缓存时间配置 -->
      <el-form-item label="缓存时间配置">
        <el-input v-model="form.cacheTime" placeholder="请输入缓存时间" />
      </el-form-item>

      <!-- 按钮组 -->
      <el-form-item>
        <el-button type="primary" @click="handleSave">确定</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { ElMessage } from "element-plus";

const form = reactive({
  connectionLimit: 1500,
  heartbeatInterval: 60,
  encryption: "SSL",
  alarmThresholdType: "温度",
  alarmThresholdValue: "80",
  logLevel: "一般",
  cacheTime: "20s"
});

const handleSave = () => {
  ElMessage.success("保存成功");
};

const handleCancel = () => {
  ElMessage.info("操作已取消");
};
</script>

<style scoped>
.el-form {
  text-align: center;
}
</style>
